<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/home.style.css"/>
</head>
<body>

<!-- 头部，包括文字介绍，侧边唤出按钮，按需可在header-desc里面添加主题图片 -->
<header class="am-text-center">
    <div class="am-topbar" data-am-sticky>
        <div class="am-container">
            <a href="#offcanvas" class="am-icon-reorder am-fl" data-am-offcanvas></a>
            <form class="am-topbar-form am-topbar-right am-form-inline" role="search">
                <div class="am-form-group">
                    <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
                </div>
            </form>
        </div>
    </div>
    <div class="header-desc">
        <h1>XXX-Home Page</h1>
        <p>这里是介绍~这里是介绍~这里是介绍~这里是介绍~这里是介绍~这里是介绍~这里是介绍~这里是介绍~这里是介绍~</p>
    </div>
</header>

<!-- 侧边栏，包括一个折叠菜单,按钮配色可根据页面主题更改 -->
<div id="offcanvas" class="am-offcanvas">
    <div class="am-offcanvas-bar">
        <div class="am-offcanvas-content">
            <button class="am-btn am-btn-block" data-am-collapse="{target: '#collapse-nav'}">Menu</button>
            <nav>
                <ul id="collapse-nav" class="am-nav am-collapse am-text-center">
                    <li><a href="">xxx</a></li>
                    <li><a href="">xxx</a></li>
                    <li><a href="">xxx</a></li>
                    <li><a href="">xxx</a></li>
                </ul>
            </nav>
            <button class="am-btn am-btn-block">XXX</button>
            <button class="am-btn am-btn-block">XXX</button>
            <button class="am-btn am-btn-block">XXX</button>
        </div>
    </div>
</div>

<!-- 轮播部分，可以添加图片背景，也可以改作图片展示，放置图片时应注意图片尺寸，以免将轮播框撑得太大 -->
<div class="am-slider am-slider-default">
    <ul class="am-slides am-text-center">
        <li>
            <div class="slider-page">
                <h1>这里是第一页</h1>
                <p>内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~</p>
            </div>
        </li>
        <li>
            <div class="slider-page">
                <h1>这里是第二页</h1>
                <p>内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~</p>
            </div>
        </li>
        <li>
            <div class="slider-page">
                <h1>这里是第三页</h1>
                <p>内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~</p>
            </div>
        </li>
        <li>
            <div class="slider-page" id="page-4">
                <h1>这里是第四页</h1>
                <p>这页有背景图片</p>
            </div>
        </li>
    </ul>
</div>

<!-- 内容区块 -->
<section class="home-content am-text-center">
    <h2 class="am-text-top">这个区块只有一个内容</h2>
    <div class="col-md-12 am-u-md-12">
        <p>内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~内容~~</p>
    </div>
</section>

<section class="home-content am-text-center" id="section-2">
    <h2 class="am-text-top">这个区块有两个内容，还有背景图片</h2>
    <div class="col-md-6 am-u-md-6">
        <p>内容一</p>
    </div>
    <div class="col-md-6 am-u-md-6">
        <p>内容二</p>
    </div>
</section>

<section class="home-content am-text-center">
    <h2 class="am-text-top">这个区块有四个内容</h2>
    <div class="col-md-3 am-u-md-3">
        <p>内容一</p>
    </div>
    <div class="col-md-3 am-u-md-3">
        <p>内容二</p>
    </div>
    <div class="col-md-3 am-u-md-3">
        <p>内容三</p>
    </div>
    <div class="col-md-3 am-u-md-3">
        <p>内容四</p>
    </div>
</section>


<footer>
    <p>home page template<br/>
        <small>© Copyright XXX. Designed by Misic.</small>
    </p>
</footer>


<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>

<!--[if lt IE 9]>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<script>
    $(function() {
        $('.am-slider').flexslider({
            controlNav: false,
            smoothHeight: false
        });
    });
</script>
</body>
</html>